<template>
  <div>
    <div
      v-if="!showPointLogin"
      class="login_container"
      :style="{ 'background-image': `url(${bgImg}` }"
    >
      <div class="connect">
        <div class="login_left">
          <img class="school_logo" :src="logoImg" alt="加载失败"/>
          <img class="line_img" src="@/assets/images/line_img.png" alt="加载失败"/>
          <img class="pingtai_name" :src="logoPtName" alt="加载失败"/>
        </div>
        <div class="login_right">
          <div class="login_right_top">
            <div class="flex">
              <img
                class="user_login_icon"
                src="@/assets/images/user_login_icon.png"
                alt="加载失败"
              />
              <div class="login_title">用户登录</div>
            </div>
          </div>
          <el-form
            v-show="!isReset"
            ref="loginForm"
            class="loginForm"
            :model="loginForm"
            :rules="loginRules"
          >
            <el-form-item prop="username">
              <el-input
                class="form_ipt"
                v-model="loginForm.username"
                type="text"
                auto-complete="off"
                placeholder="请输入账号"
              >
                <img
                  slot="prefix"
                  class="ipt_icon"
                  src="@/assets/images/ipt_user_icon.png"
                  alt="加载失败"
                />
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                class="form_ipt"
                v-model="loginForm.password"
                :type="flagType"
                auto-complete="off"
                placeholder="请输入密码"
                @keyup.enter.native="handleLogin"
              >
                <img
                  slot="prefix"
                  class="ipt_pwd_icon"
                  src="@/assets/images/ipt_pwd_icon.png"
                  alt="加载失败"
                />
                <svg-icon
                  @click="getFlag"
                  slot="suffix"
                  class-name="eyes_icon"
                  :icon-class="flag ? 'close-eyes' : 'open-eyes'"
                />
              </el-input>
            </el-form-item>
            <el-form-item>
              <div class="tipline">
                <el-checkbox v-model="loginForm.rememberMe" class="remember"
                >记住密码
                </el-checkbox
                >
                <div class="forget" @click="forget">忘记密码？</div>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button
                class="login_btn"
                :loading="loading"
                size="medium"
                type="primary"
                @click.native.prevent="handleLogin"
              >
                <span class="font_bold" v-if="!loading">登 录</span>
                <span class="font_bold" v-else>登 录 中...</span>
              </el-button>
            </el-form-item>
          </el-form>
          <!-- 重置密码 -->
          <el-form
            style="margin-top: 20px"
            v-show="isReset"
            ref="phoneLoginForm"
            :model="phoneLoginForm"
            :rules="phoneLoginRules"
          >
            <el-form-item prop="username">
              <el-input
                class="form_ipt"
                v-model="phoneLoginForm.username"
                type="text"
                auto-complete="off"
                placeholder="请输入手机号"
              >
                <img
                  slot="prefix"
                  class="ipt_icon"
                  src="@/assets/images/ipt_user_icon.png"
                  alt="加载失败"
                />
              </el-input>
            </el-form-item>
            <el-form-item prop="code">
              <el-input
                oninput="value=value.replace(/^-1|[^0-9]/g,'')"
                maxlength="6"
                class="form_ipt"
                v-model="phoneLoginForm.code"
                type="text"
                auto-complete="off"
                placeholder="请输入验证码"
                @keyup.enter.native="handleReset"
              >
                <img
                  slot="prefix"
                  class="code_icon"
                  src="@/assets/images/code_icon.png"
                  alt="加载失败"
                />
                <div
                  class="get_code"
                  slot="suffix"
                  @click="getVerCode"
                  v-if="ifSend"
                >
                  {{ ifFistClick ? '获取验证码' : '重新获取' }}
                </div>
                <div class="get_code" slot="suffix" v-else>{{ second }}S</div>
              </el-input>
            </el-form-item>
            <el-form-item prop="newPassword">
              <el-input
                class="form_ipt"
                v-model="phoneLoginForm.newPassword"
                :type="flagType"
                auto-complete="off"
                placeholder="设置密码：6-20位数字、字母和符号"
              >
                <img
                  slot="prefix"
                  class="ipt_pwd_icon"
                  src="@/assets/images/ipt_pwd_icon.png"
                  alt="加载失败"
                />
                <svg-icon
                  @click="getFlag"
                  slot="suffix"
                  class-name="eyes_icon"
                  :icon-class="flag ? 'close-eyes' : 'open-eyes'"
                />
              </el-input>
            </el-form-item>

            <el-form-item prop="againPassword">
              <el-input
                class="form_ipt"
                v-model="phoneLoginForm.againPassword"
                :type="sureFlagType"
                auto-complete="off"
                placeholder="请再次输入新密码"
              >
                <img
                  slot="prefix"
                  class="ipt_pwd_icon"
                  src="@/assets/images/ipt_pwd_icon.png"
                  alt="加载失败"
                />
                <svg-icon
                  @click="getSureFlag"
                  slot="suffix"
                  class-name="eyes_icon"
                  :icon-class="sureFlag ? 'close-eyes' : 'open-eyes'"
                />
              </el-input>
              <div
                class="absolute"
                @click="toLogin"
                style="
                  right: 0;
                  font-size: 14px;
                  font-family: PingFangSC-Regular, PingFang SC, sans-serif;
                  font-weight: 400;
                  color: #1ab394;
                  cursor: pointer;
                "
              >
                去登录
              </div>
            </el-form-item>
            <el-form-item>
              <el-button
                class="login_btn"
                :loading="loading"
                size="medium"
                type="primary"
                @click.native.prevent="handleReset"
              >
                <span class="font_bold" v-if="!loading">确 认</span>
                <span class="font_bold" v-else>确 认 中...</span>
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="icp_content">
        <span
          @click="turnTo('https://beian.miit.gov.cn/#/Integrated/recordQuery')"
        >杭钢炽橙智能科技有限公司 备案号：浙ICP备18057432号-3</span
        >
      </div>
      <div class="suggest_content">
        <span @click="turnTo('https://www.google.cn/chrome/next-steps.html')"
        >推荐使用Chrome浏览器</span
        >
      </div>
      <changeRoleDia
        :open.sync="open"
        :roles="roles"
        :res="res"
        type="choose"
      ></changeRoleDia>
    </div>
    <div v-if="showPointLogin" class="showPointLogin">
      <div style="display: flex; flex-direction: column; align-items: center">
        <div class="loader"></div>
        <div style="color: #ae01e0">正在登录...</div>
      </div>
    </div>
    <!--    管理员手机验证-->
    <el-dialog
      title="短信验证"
      :visible.sync="adminPhoneDialogVisible"
      width="450px"
    >
      <div>
        <el-form
          ref="adminPhoneForm"
          :model="adminPhoneForm"
          :rules="adminPhoneRules"
          class="adminPhoneForm"
          @submit.native.prevent
        >
          <el-form-item prop="code">
            <el-input
              oninput="value=value.replace(/^-1|[^0-9]/g,'')"
              maxlength="6"
              class="form_ipt"
              v-model="adminPhoneForm.code"
              type="text"
              auto-complete="off"
              placeholder="请输入短信验证码"
              @keyup.enter.native="handleAdminPhoneLogin"
            >
              <img
                slot="prefix"
                class="code_icon"
                src="@/assets/images/code_icon.png"
                alt="加载失败"
              />
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              class="login_btn"
              :loading="loading"
              size="medium"
              type="primary"
              @click="handleAdminPhoneLogin"
            >
              <span>确 认</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { phoneCodeVerify, setRoleBranchId } from '@/api/login'
import changeRoleDia from '@/components/changeRoleDia'
import {
  updatePwd,
  sendPhoneCode,
  loginV2,
  tokenCallBack,
  getTokenByiDaaS,
  protocol_prefixApi
} from '@/api/login'
import Cookies from 'js-cookie'
import { encrypt, decrypt } from '@/utils/jsencrypt'
import { setToken } from '@/utils/auth'

export default {
  name: 'Login',
  components: { changeRoleDia },
  data() {
    return {
      protocolPrefix: [],
      //密码小眼睛切换状态
      flag: false,
      flagType: 'password',
      sureFlag: false,
      sureFlagType: 'password',
      open: false,
      showPointLogin: false,
      res: {},
      roles: [],
      bgImg: `https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/bg_login_img.jpg`,
      logoImg: `https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/school_logo.png`,
      logoPtName: `https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/pt_name.png`,
      codeUrl: '',
      loginForm: {
        username: '',
        password: '',
        rememberMe: false,
        code: '',
        uuid: ''
      },
      loginRules: {
        username: [
          { required: true, trigger: 'blur', message: '请输入您的账号' }
        ],
        password: [
          { required: true, trigger: 'blur', message: '请输入您的密码' }
        ],
        code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
      },
      ifSend: true,
      ifFistClick: true,
      second: '',
      isReset: false,
      phoneLoginEnabled: false,
      phoneLoginForm: {
        username: '',
        code: '',
        newPassword: '',
        againPassword: ''
      },
      phoneLoginRules: {
        username: [
          {
            required: true,
            trigger: 'blur',
            message: '账号错误，请输入正确账号（工号/学号）'
          },
          {
            pattern:
              /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
            message: '手机号格式错误',
            trigger: 'blur'
          }
        ],
        code: [{ required: true, trigger: 'blur', message: '请输入验证码' }],
        newPassword: [
          { required: true, trigger: 'blur', message: '请输入密码' },
          {
            pattern:
              /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{6,20}$/,
            message: '密码必须包含数字、字母和符号，长度6-20位',
            trigger: 'blur'
          }
        ],
        againPassword: [
          { required: true, trigger: 'blur', message: '请再次输入密码' },
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入密码'))
              } else if (value !== this.phoneLoginForm.newPassword) {
                callback(new Error('两次输入的密码不一致'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      },
      loading: false,
      // 验证码开关
      captchaEnabled: true,
      // 注册开关
      register: false,
      forgetPassword: false,
      redirect: undefined,
      // 超级管理员登录验证
      adminPhoneDialogVisible: false,
      adminPhoneForm: {
        code: ''
      },
      adminPhoneRules: {
        code: [
          { required: true, trigger: 'blur', message: '请输入验证码' }
        ]
      },
      ifAdminSend: true,
      ifAdminFistClick: true,
      adminSecond: '',
      userInfo: {}
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
    // this.getPhoneLoginEnabled()
    this.getCookie()
    this.initBackground()
  },
  mounted() {
    if (this.$route.query.code) {
      this.showPointLogin = true
      if (
        this.$route.query.redirect &&
        this.$route.query.redirect.includes('approvalAnswer')
      ) {
        this.singlePointLoginByIdaas(this.$route.query.code)
      } else {
        this.singlePointLogin(this.$route.query.code)
      }
    }
  },
  methods: {
    // 初始化背景
    async initBackground() {
      try {
        let res = await protocol_prefixApi()
        const { code, data } = res
        if (code == 200) {
          this.protocolPrefix = data
          let sign
          for (const protocolPrefix of data) {
            console.log(protocolPrefix.dictLabel)
            let str = `${protocolPrefix.dictLabel}.metaxun.com`
            if (window.location.hostname == str) {
              sign = protocolPrefix.dictLabel
            }
          }
          if (sign) {
            this.bgImg = `https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/${sign}/bg_login_img.jpg`
            this.logoImg = `https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/${sign}/school_logo.png`
            this.logoPtName = `https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/${sign}/pt_name.png`
          }
        }
      } catch (e) {
        console.error(e)
      }
    },
    //教师批改直接登录
    async singlePointLoginByIdaas(code) {
      let params = {
        code: code
      }
      try {
        let res = await getTokenByiDaaS(params)
        const { code, data } = res
        if (code == 200) {
          setToken(`${data.access_token}|${data.userId}`)
          this.$store.dispatch('SET_TOKEN', data.access_token)
          let roles = data.roleList.filter((item) => {
            return item.roleKey == 'teacher'
          })
          if (roles && roles.length > 0) {
            localStorage.setItem('curRole', roles[0].roleKey)
            setRoleBranchId(
              roles[0].roleId,
              roles[0].branchId
            ).then(() => {
              this.$modal.msgSuccess('登陆成功！')
              this.$router.replace({ path: this.redirect || '/' })
            })
          } else {
            localStorage.setItem('curRole', data.roleList[0].roleKey)
            setRoleBranchId(
              data.roleList[0].roleId,
              data.roleList[0].branchId
            ).then(() => {
              this.$modal.msgSuccess('登陆成功！')
              this.$router.replace({ path: this.redirect || '/' })
            })
          }
        }
      } catch (e) {
        console.error(e)
      }
    },
    getFlag() {
      this.flag = !this.flag
      this.flagType = this.flag ? 'text' : 'password' //text为显示密码；password为隐藏密码
    },
    getSureFlag() {
      this.sureFlag = !this.sureFlag
      this.sureFlagType = this.sureFlag ? 'text' : 'password' //text为显示密码；password为隐藏密码
    },
    //单点登录 获取token
    async singlePointLogin(code) {
      let params = {
        code: code
      }
      try {
        let res = await tokenCallBack(params)
        const { code, data } = res
        if (code == 200) {
          setToken(`${data.access_token}|${data.userId}`)
          this.$store.dispatch('SET_TOKEN', data.access_token)
          let roles = data.roleList.filter((item) => {
            return item.roleKey == 'teacher'
          })
          if (roles && roles.length > 0) {
            localStorage.setItem('curRole', roles[0].roleKey)
            setRoleBranchId(
              roles[0].roleId,
              roles[0].branchId
            ).then(() => {
              this.$modal.msgSuccess('登陆成功！')
              this.$router.replace({ path: this.redirect || '/' })
            })
          } else {
            localStorage.setItem('curRole', data.roleList[0].roleKey)
            setRoleBranchId(
              data.roleList[0].roleId,
              data.roleList[0].branchId
            ).then(() => {
              this.$modal.msgSuccess('登陆成功！')
              this.$router.replace({ path: this.redirect || '/' })
            })
          }
        }
      } catch (e) {
        console.error(e)
      }
    },
    async getVerCode() {
      if (!this.ifSend) {
        return
      }
      let sign = ''
      //根据域名在账号拼接前缀
      for (const protocolPrefix of this.protocolPrefix) {
        let str = `${protocolPrefix.dictLabel}.metaxun.com`
        if (window.location.hostname == str) {
          sign = protocolPrefix.dictValue
        }
      }
      await sendPhoneCode({
        username: this.phoneLoginForm.username
      })
      this.$message({
        message: '发送验证码成功',
        type: 'success'
      })
      this.ifFistClick = false
      this.second = 59
      this.ifSend = false
      let time = null
      clearInterval(time)
      time = setInterval(() => {
        if (this.second > 0) {
          this.second--
        } else {
          clearInterval(time)
          this.ifSend = true
        }
      }, 1000)
    },
    // 超管登录验证
    handleAdminPhoneLogin() {
      this.$refs.adminPhoneForm.validate(async(valid) => {
        if (valid) {
          try {
            let obj = {
              code: btoa(`hgcc${this.adminPhoneForm.code}`)
            }
            let res = await phoneCodeVerify(obj)
            if (res.code == 200) {
              localStorage.setItem('curRole', this.userInfo.roleList[0].roleKey)
              setToken(`${this.userInfo.access_token}|${this.userInfo.userId}`)
              this.$store.dispatch('SET_TOKEN', this.userInfo.access_token)
              setRoleBranchId(
                this.userInfo.roleList[0].roleId,
                this.userInfo.roleList[0].branchId
              ).then(() => {
                this.$router
                  .push({ path: this.redirect || '/' })
                  .catch(() => {
                  })
              })
            } else {
              this.$message.error('验证码错误')
            }
          } catch (e) {
            console.error(e)
          }
        }
      })
    },
    turnTo(url) {
      window.open(url)
    },
    getCookie() {
      const username = Cookies.get('username')
      const password = Cookies.get('password')
      const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password:
          password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.loginForm.rememberMe) {
            Cookies.set('username', this.loginForm.username, { expires: 30 })
            Cookies.set('password', encrypt(this.loginForm.password), {
              expires: 30
            })
            Cookies.set('rememberMe', this.loginForm.rememberMe, {
              expires: 30
            })
          } else {
            Cookies.remove('username')
            Cookies.remove('password')
            Cookies.remove('rememberMe')
          }
          //phoneLoginEnabled  是否需要手机号验证码登录
          if (this.phoneLoginEnabled) {
            loginV2(this.loginForm)
              .then((res) => {
                //如果时admin等超级管理员角色  不需要手机号验证直接给token登录
                if (res.token) {
                  this.$store
                    .dispatch('setV2Token', res.token)
                    .then(() => {
                      this.isReset = false
                      this.$router
                        .push({ path: this.redirect || '/' })
                        .catch(() => {
                        })
                    })
                    .catch(() => {
                      this.loading = false
                      if (this.captchaEnabled) {
                        // this.getCode()
                      }
                    })
                } else {
                  this.isReset = true
                  this.loading = false
                  this.phoneLoginForm.phoneNumber = res.phone
                }
              })
              .catch(() => {
                this.loading = false
              })
          } else {
            let sign = ''
            //根据域名在账号拼接前缀
            for (const protocolPrefix of this.protocolPrefix) {
              let str = `${protocolPrefix.dictLabel}.metaxun.com`
              if (window.location.hostname == str) {
                sign = protocolPrefix.dictValue
              }
            }
            let params = {
              ...this.loginForm,
              sign: sign ? sign : ''
            }
            this.$store
              .dispatch('Login', params)
              .then((res) => {
                if (
                  (res.data.role.indexOf('admin') > -1 &&
                    res.data.roleList.length == 1) && res.data.adminVerificationFlag == 'true'
                ) {
                  this.userInfo = res.data
                  this.adminPhoneDialogVisible = true
                  this.loading = false
                  return
                }
                if (
                  res.data.role.indexOf('expert') > -1 &&
                  res.data.roleList.length == 1
                ) {
                  this.$modal.msgWarning('您是专家身份，暂无登录权限！')
                  this.loading = false
                  return
                }
                this.isReset = false
                this.roles = res.data.roleList.filter((item) => {
                  return item.roleKey != 'expert'
                })
                if (res.data.roleList.length == 1) {
                  localStorage.setItem('curRole', res.data.roleList[0].roleKey)
                  setToken(`${res.data.access_token}|${res.data.userId}`)
                  this.$store.dispatch('SET_TOKEN', res.data.access_token)
                  setRoleBranchId(
                    res.data.roleList[0].roleId,
                    res.data.roleList[0].branchId
                  ).then(() => {
                    this.$router
                      .push({ path: this.redirect || '/' })
                      .catch(() => {
                      })
                  })
                } else {
                  this.res = res
                  this.open = true
                }
              })
              .catch(() => {
                this.loading = false
                if (this.captchaEnabled) {
                  // this.getCode()
                }
              })
          }
        }
      })
    },
    toLogin() {
      this.isReset = false
    },
    forget() {
      this.resetForm('phoneLoginForm')
      this.isReset = true
    },
    // 重置密码确认
    handleReset() {
      this.$refs.phoneLoginForm.validate(async(valid) => {
        if (valid) {
          this.loading = true
          let sign = ''
          //根据域名在账号拼接前缀
          for (const protocolPrefix of this.protocolPrefix) {
            let str = `${protocolPrefix.dictLabel}.metaxun.com`
            if (window.location.hostname == str) {
              sign = protocolPrefix.dictValue
            }
          }
          let params = {
            username: this.phoneLoginForm.username,
            newPassword: this.phoneLoginForm.newPassword,
            phoneCode: this.phoneLoginForm.code
          }
          let res
          try {
            res = await updatePwd(JSON.stringify(params))
            // 重置密码成功
            if (res.code == 200) {
              this.$message({
                message: '重置密码成功,请重新登录！',
                type: 'success'
              })
              this.isReset = false
            }
          } finally {
            this.loading = false
          }
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" scoped lang="scss">
.login_container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.connect {
  display: flex;
  align-items: center;

  .login_left {
    width: 512px;
    height: 480px;
    border-radius: 20px 0 0 20px;
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-right: 0;
    padding: 118px 0 0 52px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;

    .school_logo {
      width: 327px;
      height: auto;
    }

    .line_img {
      margin: 29px 0 17px 0;
      width: 327px;
      height: 4px;
    }

    .pingtai_name {
      width: 283px;
      height: 41px;
    }
  }

  .login_right {
    width: 512px;
    height: 480px;
    border-radius: 0 20px 20px 0;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;

    ::v-deep .form_ipt.el-input--medium .el-input__inner {
      width: 360px;
      height: 48px;
      background: #ffffff;
      border-radius: 30px;
      line-height: 48px;
      padding-left: 62px;
      box-sizing: border-box;
    }

    ::v-deep .el-input__prefix {
      margin-top: 11px;
      left: 32px;
    }

    .login_btn {
      margin-top: 23px;
      width: 360px !important;
      height: 48px;
      background: #28b28b;
      border-radius: 30px;
    }
  }
}

.icp_content {
  width: 100%;
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 30px;
  left: 0;
  color: #a4a4a4;
  font-size: 16px;
  font-weight: 500;

  span {
    cursor: pointer;
  }
}

.suggest_content {
  width: 100%;
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 10px;
  left: 0;
  color: #2191df;
  font-size: 16px;
  font-weight: 500;

  span {
    cursor: pointer;
  }
}

.login_right_top {
  width: 100%;
  display: flex;
  border-bottom: 1px solid #f5f5f6;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;

  .user_login_icon {
    width: 28px;
    height: 28px;
  }

  .login_title {
    margin-left: 15px;
    font-size: 24px;
    font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
    font-weight: 600;
    color: #333333;
  }

  .right_title {
    width: 120px;
    position: relative;
  }

  .down_select {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 8px;
    right: 0;
  }
}

.loginForm {
  margin-top: 60px;
}

.tipline {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 10px 0 32px;
  box-sizing: border-box;

  .remember {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #999999;
  }

  .forget {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #999999;
    cursor: pointer;
    user-select: none;
  }
}

.shou {
  cursor: pointer;
  align-items: center;
  user-select: none;
}

::v-deep .right_title .el-input--medium .el-input__inner {
  border: 0;
  text-align: right;
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC, sans-serif;
  font-weight: 400;
  color: #28b28b;
  line-height: 25px;
  background: transparent;
  padding: 0 26px 0 0;
}

::v-deep .el-icon-arrow-up:before {
  display: none;
}

.font_bold {
  font-size: 18px;
  font-weight: bold;
}

.ipt_icon {
  width: 19px;
  height: 20px;
}

.phoneNumber_icon {
  width: 14px;
  height: 20px;
}

.code_icon {
  width: 18px;
  height: 20px;
}

.ipt_pwd_icon {
  width: 16px;
  height: 20px;
}

.get_code {
  cursor: pointer;
  user-select: none;
  color: #1ab394;
  margin: 6px 16px 0 0;
}

.showPointLogin {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  width: 100px;
  aspect-ratio: 1;
  padding: 10px;
  box-sizing: border-box;
  display: grid;
  background: #fff;
  filter: blur(3px) contrast(7) hue-rotate(290deg);
  mix-blend-mode: darken;
}

.loader:before {
  content: "";
  margin: auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #ff0000;
  background: currentColor;
  box-shadow: -30px 0, 30px 0, 0 30px, 0 -30px;
  animation: l6 1s infinite alternate;
}

@keyframes l6 {
  90%,
  100% {
    box-shadow: -10px 0, 10px 0, 0 10px, 0 -10px;
    transform: rotate(180deg);
  }
}

.race_enter {
  top: 100px;
  right: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  background: white;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 20px;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

  .img {
    width: 200px;
    height: 188px;
    background-image: url("../assets/images/race_enter.png");
    background-size: 100% 100%;
    position: relative;

    .el-icon-close {
      position: absolute;
      top: -12px;
      right: -17px;
      color: #b5c3f6;
      font-weight: bold;
      font-size: 18px;
    }
  }

  .text {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
  }
}

.eyes_icon {
  color: #ed5565;
  margin: 16px 10px 0;
  font-size: 16px;
  cursor: pointer;
}

.adminPhoneForm {
  margin-top: 40px;

  ::v-deep .form_ipt.el-input--medium .el-input__inner {
    width: 360px;
    height: 48px;
    background: #ffffff;
    border-radius: 30px;
    line-height: 48px;
    padding-left: 62px;
    box-sizing: border-box;
  }

  ::v-deep .el-input__prefix {
    margin-top: 11px;
    left: 32px;
  }

  .get_code {
    cursor: pointer;
    user-select: none;
    color: #1ab394;
    margin: 6px 20px 0 0;
  }

  .code_icon {
    width: 18px;
    height: 20px;
  }

  .login_btn {
    margin-top: 23px;
    width: 360px !important;
    height: 48px;
    background: #28b28b;
    border-radius: 30px;
  }
}
</style>
